<template>
  <div class="wp">
      <div class="head">
        <img src="@/assets/2_25.png" class="pic_1" @click="back"/>
        <h3>科幻</h3>
        <img src="@/assets/2_2.png" class="pic_2" />
      </div>
    <div class="head-r"></div>
    <div class="content">
      <ul>
        <li v-for="(item, index) in hot" :key="index">
          <div class="a1_wp">
            <img :src="item.img"  class="pic_ht"/>
            <h4 class="name_a1">{{ item.name }}</h4>
            <h4 class="aut_a1">{{ item.author }}</h4>
            <img src="@/assets/2_gengduo.png"  class="pic_gd"/>
            <h4 class="txt_a1">{{item.txt}}</h4>
            </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {
       hot:[
        {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
       {
        id :'2',
        img:require('@/assets/2_20.png'),
        name: '未来简史',
        author: '作者：尤瓦尔• 郝拉利',
        txt:'讲述了一段有关未来50年令人难以置信的故事。他剖析了各国...'
      },
       {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'2',
        img:require('@/assets/2_20.png'),
        name: '未来简史',
        author: '作者：尤瓦尔• 郝拉利',
        txt:'讲述了一段有关未来50年令人难以置信的故事。他剖析了各国...'
      },
       {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
      {
        id :'2',
        img:require('@/assets/2_20.png'),
        name: '未来简史',
        author: '作者：尤瓦尔• 郝拉利',
        txt:'讲述了一段有关未来50年令人难以置信的故事。他剖析了各国...'
      },
       {
        id :'1',
        img:require('@/assets/2_19.png'),
        name: '三体：死神永生',
        author: '作者：刘慈心',
        txt:'刘慈欣创作的系列长篇科幻小说地球往事三部曲的第三部作品...'
      },
       ]
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    back(){
        this.$router.go(-1);//返回上一层
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  }
}
</script>

<style lang='less'>
  .head {
  width: 100%;
  height: 200px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #21272e;
  z-index: 999;
  .pic_1 {
    width: 34px;
    height: 33px;
    margin-top: 112px;
    margin-left: 48px;
  }
  .pic_2 {
    float: right;
    width: 34px;
    height: 28px;
    margin-top: 114px;
    margin-right: 48px;
  }
  h3{
    position: absolute;
    left: 50%;
    top: 95px;
    transform: translate(-50%);
    	font-size: 44px;
	    font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0px;
    	color: #ffffff;
  }
}
.head-r {
  height: 200px;
}
.a1_wp{
  margin-top: 80px;
  margin-left: 45px;
 	width: 654px;
	height: 250px;
  border-radius: 20px;
  background-color: #2b323b;
  }
  .pic_ht{
    float: left;
    width: 168px;
    margin-top: -35px;
    margin-left: 40px;
    margin-right: 29px;
  }
  .name_a1{
    padding-top: 28px;
    float: left;
    font-size: 36px;
  	font-weight: normal;
	  font-stretch: normal;
	  letter-spacing: 0px;
	  color: #ffffff;
  }
  .pic_gd{
    margin-top: -30px;
    margin-right: 30px;
    float: right;
    width: 30px;
  }
  .aut_a1{
  float: left;
  padding-top: 5px;
  padding-bottom: 15px;
  width: 334px;
  font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #5d637c;
  border-bottom: solid 1px #363d47;
  }
  .txt_a1{
  margin-top: 5px;
  float: left;
  width: 400px;
	font-size: 24px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 36px;
	letter-spacing: 0px;
	color: #868dab;
  }
</style>